Animations

Style sheet

.m-something {
    // Ensuring that elements bleeding out of this component is not visible. In this case, the image (due to the scale effect on hover).
    overflow: hidden;

    &__title-wrapper {
        // Ensuring that elements bleeding out of this component is not visible. In this case, the title which is inside wrapper
        overflow: hidden;
    }

    &__title {
        // Hiding title outside the wrapper (would be visible without overflow:hidden on wrapper)
        transform: translateX(-100%);

        // Transitions needed to be added on element BEFORE user hovers or scrolls to item.
        transition: $g-trans-base;
    }

    &__img {
        // Transitions needed to be added on element BEFORE user hovers or scrolls to item.
        transition: $g-trans-base;
        transform: scale(1);
    }

    // User has scrolled to the element. Don't add transitions below.
    &.animated {
        .m-something {
            &__title {
                // Making the title visible. Notice that the transition is not present here (on purpose).
                transform: translateX(0%);
            }
        }
    }

    // We're hovering over the element here. Let's make elements move.
    &:hover {
        .m-something {
            &__img {
                // Zooming image on hover
                transform: scale(1.2);
            }
        }
    }
}

HTML

{# Adding the WOW class which transforms into the "animated" class. This allows us to add an animation when the user scrolls to this element. #}
<div class="m-something wow">
    {% include '01-atoms/typography/title/title.twig' with {
        parent_class        : component_class,
        title               : section.title,
        add_class_in_view   : false
    } only %}

    {% set img = TimberImage( section.image ) %}

    {% include '01-atoms/images/image-01/image-01.twig' with {
        parent_class          : component_class,
        img                   : img,
        lazyload              : true,
        resize_number         : 600,
        wrapper               : true,
        add_class_in_view     : true
    } only %}
</div>